<template>

  <div>
    <el-upload

      class="avatar-uploader"
      action="#"
      :show-file-list="false"
      :http-request="uploadFn"
      :disabled="b"
      :on-progress="onprogress"
    >
      <el-image :src="staffPhotoUrl" alt="" class="avatar">

        <template slot="error" class="avatar">
上传图片

        </template>

      </el-image>

    </el-upload>

<div>

</div>

  </div>

</template>

<script>
// 导入 cos 模块
const COS = require('cos-js-sdk-v5')

// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
var cos = new COS({
  SecretId: 'AKIDvf9NL2SbU6SYNwDDxPbV8VaOvBBuMXR4',
  SecretKey: 'NTJtCl9IBpEOJzPaWCcmjSv97qJXXHlz'
})
export default {
  name: 'Upload',
  props: {
    staffPhotoUrl: String
  },
  data () {
    return {

      lod: 0,
      zaijia: '',
      b: false,
      ass: false,
      asd: false,
      iamg: false

    }
  },
  created () {
    this.a = 'https:ykj-1307602623.cos.ap-nanjing.myqcloud.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20210923110109.jpg'
  },
  methods: {
    uploadFn (res) {
      console.log(res)
      if (res.file) {
        cos.putObject({
          Bucket: 'xiaohe-1307422323', // 存储桶的名称，必须
          Region: 'ap-beijing', // 存储桶所在地域，必须字段
          Key: res.file.name, // 文件名，必须
          StorageClass: 'STANDARD', // 上传模式, 标准模式
          Body: res.file, // 上传文件对象
          // 上传进度条
          onProgress: (progressData) => {
            this.b = true
            this.ass = true
            this.iamg = true
            this.lod = parseInt((100 - 0) * (progressData.loaded - 0) / (progressData.total - 0) + 0) || 0
            if (this.lod === 100 || this.lod === 0) {
              this.$emit('lod', this.lod)
              this.asd = true
              this.b = false
              this.iamg = false
            }
            console.log(this.lod)
          }
        }, (err, data) => {
          if (err === null && data.statusCode === 200) {
            this.staffPhotoUrl = `https:${data.Location}`
            this.$emit('upimgFn')
            this.$emit('imgurl', this.staffPhotoUrl)
          }
        })
      }
    },
    onprogress () {
      console.log('s')
    }
  }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    text-align: center;
    line-height: 70px;
  }
  .avatar-uploader , .el-image{
    height: 70px;
    width: 150px;
  }

</style>
